<template>

    <div>
        <a-row>
            <a-col>
                <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
                <a-tree :expanded-keys="expandedKeys" :autoExpandParent="autoExpandParent" :tree-data="treeDataList"
                    @select="onSelect" @expand="onExpand">
                    <template #title="{ title }">
                        <!-- <span v-if="title.indexOf(searchValue) > -1">
                            {{ title.substr(0, title.indexOf(searchValue)) }}
                            <span style="color: #f50">{{ searchValue }}</span>
                            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                        </span> -->
                        <span >{{ title }}</span>
                    </template>
                    <template #icon="{ key }">
                        <a-icon type="step-forward"></a-icon>
                    </template>
                </a-tree>
            </a-col>
        </a-row>

    </div>

</template>

<script>

import { getDepartDevicesTree, getDepartDevicesTreeDetail } from '@/api/deviceApi'
import { isNull, isUndefined } from 'lodash';

export default {
    name: 'DeviceTree',
    props: {

    },
    components: {
        // SmileOutlined
    },
    data() {
        return {
            loading: false,
            model: {},
            treeDataList: [],
            expandedKeys: [],
            searchValue: '',
            searchStr: '',
            autoExpandParent: true,
            currentDevice: {
                baseinfo: {
                    name: '请选择一个设备',
                },
                id: 0,
            },
        }
    },
    mounted() {

    },
    created() {
        // this.loadTreeItem()
        // this.treeDataList = this.treeData
    },
    methods: {
        onExpand(keys) {
            this.expandedKeys = keys;
            this.autoExpandParent = false;
        },
        onSelect(idx, info) {
            this.$emit("departSelected",info.node.dataRef);
        },
        loadTreeItem(searchVal) {
            this.loading = true;
            getDepartDevicesTree(searchVal).then((res) => {
                if (res.success) {
                    this.treeDataList = new Array();
                    let data = res.result;
                    let departExist = {};
                    let lastObj = null;
                    data.filter(d => {
                        let level = this.getDepartLevel(d.orgCode);
                        let depart = {
                            title: d.departName,
                            key: d.departId,
                            type: 0,
                            children: new Array()
                        }

                        //若部门不存在则添加部门
                        if (isUndefined(departExist[d.departId])) {
                            if (level == 1) { //根部门
                                this.treeDataList.push(depart);
                            } else {
                                //非根部门
                                if (isUndefined(lastObj.children)) {
                                    lastObj.children = new Array();
                                }
                                lastObj.children.push(depart);
                            }
                            lastObj = depart;
                            departExist[d.departId] = 1;
                        }
                        //若是设备则添加设备
                        if (!isNull(d.deviceId)) {
                            let device = {
                                title: d.deviceName,
                                key: d.deviceId,
                                type: 1
                            }
                            if (isUndefined(lastObj.children)) {
                                lastObj.children = new Array();
                            }
                            lastObj.children.push(device);
                        }
                    });
                    // console.log(this.treeData);

                }

            }).finally(() => {
                this.loading = false
            })
        },
        getDepartLevel(orgCode) {
      const count = orgCode.split('').filter((char) => char === 'A').length;
      return count;
    },
    },
    watch: {
        searchValue(value) {
            const expanded = dataList.map(item => {
                if (item.title.indexOf(value) > -1) {
                    return getParentKey(item.key, gData.value);
                }
                return null;
            }).filter((item, i, self) => item && self.indexOf(item) === i);
            this.expandedKeys = expanded;
            this.searchValue = value;
            this.autoExpandParent = true;
        },

    },
}
</script>

<style>

</style>